<html>
<head>
<title><fmt:message key="zahtevanjeVoznje" /></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="/${initParam.nazivAplikacije}/css/tema.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCboL0NZynp65Ju2VnLu0fx49ea4pVLbqU&sensor=false">
	
</script>
<script type="text/javascript"
	src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"
	src="/${initParam.nazivAplikacije}/js/org/apache/commons/validator/javascript/validateUtilities.js"></script>
<script type="text/javascript"
	src="/${initParam.nazivAplikacije}/js/org/apache/commons/validator/javascript/validateRequired.js"></script>
<script type="text/javascript"
	src="/${initParam.nazivAplikacije}/js/org/apache/commons/validator/javascript/validateMaxLength.js"></script>
<script type="text/javascript">
	var marker1 = null;

	function inicijalizujMapu() {
		var opcije = {
			// koordinate Novog Sada
			center : new google.maps.LatLng(45.2464, 19.8518),
			zoom : 8,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var mapa = new google.maps.Map(document.getElementById("platno"),
				opcije);
		google.maps.event.addListener(mapa, 'click', function(dogadjaj) {
			postaviMarker(mapa, dogadjaj.latLng);
		});
	}

	/* 
	 * brise stari i postavlja novi marker
	 */
	function postaviMarker(mapa, lokacija) {
		// ako postoji marker, ukloni ga
		if (marker1 != null) {
			marker1.setMap(null);
			marker1 = null;
		}

		// ... i postavi novi
		marker1 = new google.maps.Marker({
			position : lokacija,
			map : mapa
		});
		marker1.setTitle('<fmt:message key="ishodisnaAdresa" />');
		marker1.setDraggable(true);

		// dobijena od GeoCoder servisa
		var uredjenaAdresa;
		var geokoder = new google.maps.Geocoder();
		geokoder
				.geocode(
						{
							"location" : lokacija
						},
						function(rezultati, status) {
							if (status == google.maps.GeocoderStatus.OK) {
								uredjenaAdresa = rezultati[0].formatted_address;
								// u tekst polje ubaci trenutnu adresu markera
								document.forms[0].ishodisnaAdresa.value = uredjenaAdresa;
								// u skrivena polja geo. sirinu i duzinu
								document.forms[0].geografskaSirina.value = lokacija
										.lat();
								document.forms[0].geografskaDuzina.value = lokacija
										.lng();
								mapa.setCenter(lokacija);
								prozorcicAdresa(marker1, uredjenaAdresa);
							} else {
								alert('<fmt:message key="porukaMapeGreska" />'
										+ ': ' + status);
							}
						});

		google.maps.event.addListener(marker1, 'dragend', function(dogadjaj) {
			postaviMarker(mapa, dogadjaj.latLng);
		});
	}

	/*
	 * Info prozor sa adresom markera
	 */
	function prozorcicAdresa(marker, poruka) {
		var infoProzorcic = new google.maps.InfoWindow({
			content : poruka
		});

		google.maps.event.addListener(marker, 'click', function() {
			infoProzorcic.open(marker.get('map'), marker);
		});
	}

	/*
	 * unetu adresu graficki prikazuje na mapi
	 */
	function prikaziAdresuNaMapi() {

		var mojeOpcije = {
			zoom : 14,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var mapa = new google.maps.Map(document.getElementById("platno"),
				mojeOpcije);

		// preuzimanje adrese koju je korisnik uneo
		var adresa = document.forms[0].ishodisnaAdresa.value;
		var geokoder = new google.maps.Geocoder();
		geokoder.geocode({
			"address" : adresa
		},
				function(rezultati, status) {
					if (status == google.maps.GeocoderStatus.OK)
						postaviMarker(mapa, rezultati[0].geometry.location);
					else
						alert('<fmt:message key="porukaMapeGreska" />' + ': '
								+ status);
				});

		// Opcija 2) Ako korisnik zeli odabirom sa mape da unese ishodisnu adresu
		google.maps.event.addListener(mapa, 'click', function(dogadjaj) {
			postaviMarker(mapa, dogadjaj.latLng);
		});
	}

	function proveriAdresu() {
		if (document.forms[0].geografskaSirina.value == "") {
			alert("<fmt:message key='porukaPraznaAdresa' />");
			return false;
		}
		return true;
	}
</script>
</head>
<body onload="inicijalizujMapu()">
	<table class="zaglavlje">
		<thead>
			<tr>
				<th><a
					href="/${initParam.nazivAplikacije}/PrikazZavrsenihVoznjiKontroler"><fmt:message
							key="prikazZavrsenihVoznji" /></a></th>
				<th><a
					href="/${initParam.nazivAplikacije}/jsp/promenaLicnihPodataka.jsp"><fmt:message
							key="promenaPodataka" /></a></th>
				<th><a
					href="/${initParam.nazivAplikacije}/jsp/promenaLozinke.jsp"><fmt:message
							key="promenaLozinke" /></a></th>
				<th><a href="/${initParam.nazivAplikacije}/OdjavaKontroler"><span
						style="font-style: italic;"> <fmt:message key="odjava" />
					</span> </a></th>
			</tr>
		</thead>
	</table>
	<div id="forma">
		<form
			action="/${initParam.nazivAplikacije}/PrikazZapoceteVoznjeKontroler"
			method="get" onsubmit="return proveriAdresu()">
			<table class="glavna">
				<tr>
					<td><fmt:message key="ishodisnaAdresa" />:</td>
					<td><input type="text" name="ishodisnaAdresa"
						style="width: 95%" required /><input type="hidden"
						name="geografskaSirina" /><input type="hidden"
						name="geografskaDuzina" /></td>
					<td><input type="button" onclick="prikaziAdresuNaMapi()"
						value="<fmt:message key="prikaziNaMapi" />" /></td>
				</tr>
				<tr>
					<td><fmt:message key="brojOsoba" />:</td>
					<td><input type="text" name="brojOsoba" required /></td>
				</tr>
				<tr>
					<td><fmt:message key="zapreminaPrtljaga" />:</td>
					<td><input type="text" name="zapreminaPrtljaga" required /></td>
				</tr>
				<tr>
					<td><fmt:message key="masaPrtljaga" />:</td>
					<td><input type="text" name="masaPrtljaga" required /></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input id="posalji" type="submit"
						value="<fmt:message key="posaljiZahtev" />" /></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="platno"></div>
</body>
</html>